<script setup lang="ts">
/// 生意参谋 客户透视 客户分析 客群透视分析
import BaseApp from "~/contentScripts/views/sycm/baseApp.vue";
import User from "~/contentScripts/views/tao/list/components/user.vue";
import {isLogin} from "~/logic";
import SYCM from "~/utils/ali/sycm";
import Trans from "~/utils/sycm/trans";

const showZs = ref<Boolean>(false);
const loginVisible = ref<Boolean>(false);
const visible = ref<Boolean>(false);
const data = reactive<any>({
  xAxis: {
    name: '',
    data: [],
  },
  yAxis: {
    name: '',
    data: [],
  },
  payByrCntIndexData: [],
  tradeIndexData: [],
  payConvRateData: [],
});
const columns = ref<any[]>([]);
const dataSource = ref<any[]>([]);
const calcDataSource = () => {
  const arr: any[] = [];
  data.yAxis.data.map((yItem: string, yIndex: number) => {
    data.xAxis.data.map((xItem: string, xIndex: number) => {
      // 访客数
      let visitor: number = parseInt((Trans.number(data.payByrCntIndexData[yIndex][xIndex]).toFixed(0) / data.payConvRateData[yIndex][xIndex]).toFixed(0));
      if (isNaN(visitor)) {
        visitor = 0;
      }
      // 客单价
      let price: number = parseInt((Trans.number(data.tradeIndexData[yIndex][xIndex]).toFixed(2) / Trans.number(data.payByrCntIndexData[yIndex][xIndex]).toFixed(0)).toFixed(2));
      if (isNaN(price)) {
        price = 0;
      }
      // UV价值
      let uvPrice: number = parseFloat((Trans.number(data.tradeIndexData[yIndex][xIndex]).toFixed(2) / visitor).toFixed(2));
      if (isNaN(uvPrice)) {
        uvPrice = 0;
      }
      arr.push({
        name: yItem + ',' + xItem,
        tradeIndex: data.tradeIndexData[yIndex][xIndex],
        payByrCntIndex: data.payByrCntIndexData[yIndex][xIndex],
        payConvRate: data.payConvRateData[yIndex][xIndex],
        visitor,
        price,
        uvPrice,
      })
    })
  });
  dataSource.value = arr;
};
const calcColumns = () => {
  columns.value = [
    {
      dataIndex: 'name',
      title: '人群属性',
      sorter: (a: any, b: any) => a.name - b.name,
    },
    {
      dataIndex: 'tradeIndex',
      title: showZs.value ? '交易指数' : '交易金额',
      sorter: (a: any, b: any) => a.tradeIndex - b.tradeIndex,
      dataType: 'customRender',
      render: (text: any) => {
        if (showZs.value) {
          return text ?? 0;
        } else {
          const value = Trans.number(text).toFixed(0);
          if (isNaN(value)) {
            return 0;
          }
          return value.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        }
      }
    },
    {
      dataIndex: 'payByrCntIndex',
      title: showZs.value ? '客群指数' : '支付买家数',
      sorter: (a: any, b: any) => a.payByrCntIndex - b.payByrCntIndex,
      dataType: 'customRender',
      render: (text: any) => {
        if (showZs.value) {
          return text ?? 0;
        } else {
          const value = Trans.number(text).toFixed(0);
          if (isNaN(value)) {
            return 0;
          }
          return value.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        }
      }
    },
    {
      dataIndex: 'payConvRate',
      title: '支付转化率',
      sorter: (a: any, b: any) => a.payConvRate - b.payConvRate,
      align: 'right',
      dataType: 'customRender',
      render: (text: any, record: any, index: any) => {
        if (!isNaN(text)) {
          return (text * 100).toFixed(2) + '%';
        } else {
          return '0%';
        }
      }
    },
    {
      dataIndex: 'visitor',
      title: '访客数',
      sorter: (a: any, b: any) => a.visitor - b.visitor,
      align: 'right',
      dataType: 'customRender',
      render: (text: any) => {
        if (text) {
          return (text + '').replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        } else {
          return 0;
        }
      }
    },
    {
      dataIndex: 'price',
      title: '客单价',
      align: 'right',
      sorter: (a: any, b: any) => a.price - b.price,
    },
    {
      dataIndex: 'uvPrice',
      title: 'UV价值',
      align: 'right',
      sorter: (a: any, b: any) => a.uvPrice - b.uvPrice,
    }
  ];
}
const loading = ref<Boolean>(false);
const __option = getCurrentInstance()?.appContext.provides.option;
const handle = async () => {
  if (isLogin({
    emit: () => {
      loginVisible.value = true;
    }
  }, __option)) {
    visible.value = true;
    calcColumns();
    loading.value = true;
    const d = await SYCM.getInternalFiberData('#customerAnalysis > div.oui-card-content > span > div.card-sycm-heatmap-table', 'memoizedProps.children[0]._owner.memoizedProps');
    data.xAxis = d.xAxis;
    data.yAxis = d.yAxis;
    let curr = 1;
    for (let i = 1; i <= 3; i++) {
      const dom = document.querySelector("#customerAnalysis > div.oui-card-content > div:nth-child(2) > div > label:nth-child(" + i + ")");
      if (dom?.getAttribute('class')?.includes('ant-radio-wrapper-checked')) {
        curr = i;
        break;
      }
    }
    for (let i = 1; i <= 3; i++) {
      const dom = document.querySelector("#customerAnalysis > div.oui-card-content > div:nth-child(2) > div > label:nth-child(" + i + ")");
      dom?.click();
      let r: any;
      if (i == curr) {
        r = d.data;
      } else {
        r = await loadData();
      }
      switch (i) {
        case 1:
          data.payByrCntIndexData = r;
          break;
        case 2:
          data.tradeIndexData = r;
          break;
        default:
          data.payConvRateData = r;
      }
    }
    document.querySelector("#customerAnalysis > div.oui-card-content > div:nth-child(2) > div > label:nth-child(" + curr + ")")?.click();
    calcDataSource();
    loading.value = false;
  }
}
const loadData = async () => {
  return await SYCM.getInternalFiberData('#customerAnalysis > div.oui-card-content > span > div.card-sycm-heatmap-table', 'memoizedProps.children[0]._owner.memoizedProps.data');
}
</script>

<template>
  <base-app>
    <a-button-group>
      <user style="margin-right: 0;"/>
      <a-button type="primary" size="small" @click="handle">
        一键转化
      </a-button>
    </a-button-group>
    <user-login-modal v-model:login-visible="loginVisible"/>
    <custom-modal title="市场-客群透视-客群透视分析" width="95%" style="top: 20px" v-model:open="visible">
      <template #headerRight>
        <SYCMCustomModalHeaderNotice/>
        <a-checkbox style="margin-left: 10px;" v-model:checked="showZs">显示指数</a-checkbox>
      </template>
      <div style="height: 780px;overflow-y: scroll">
        <base-table :columns="columns" :data-source="dataSource" table-name="客户透视-客户分析-客群透视分析" :scroll="{
        y:700
      }"
        >

        </base-table>
      </div>
    </custom-modal>
  </base-app>
</template>

<style scoped>

</style>
